<template>
	<div class="workPlatformPageContainer">
		<div class="content">
			<syllabusList></syllabusList>
			<!-- 我的任务、我的班级 -->
			<el-tabs class="tabs_task_grade" v-model="tabs_task_grade"  >
				
				<el-tab-pane label="我的任务" name="task" class="task">
					<el-radio-group class="timeselect" v-model="taskData.radio" size="mini" @change="taskChangeTime">
						<el-radio-button label="今日"></el-radio-button>
						<el-radio-button label="本周"></el-radio-button>
					</el-radio-group>
					<span class="title" style="color:#3175DA">任务日程</span>
					<div class="box scrollbarstyle" style="margin-bottom:0.15rem;">
						<span class="nodataLable" v-if="!taskData.taskActivities||taskData.taskActivities.length==0">暂无任务日程</span>
						<el-timeline class="taskActivities" :reverse="timelinereverse">
							<el-timeline-item
							v-for="(activity, index) in taskData.taskActivities"
							:key="index"
							:color="activity.color"
							:timestamp="activity.timestamp">
							{{activity.content}}
							<el-button type="text" class="btn" size="mini" @click="taskCheck(activity,'任务日程')">查看</el-button>
							</el-timeline-item>
						</el-timeline>
					</div>
					<span class="title" style="color:rgb(255,185,31);">任务提醒</span>
					<div class="box scrollbarstyle" style="height:1.05rem;">
						<el-timeline class="taskRemind" :reverse="timelinereverse">
							<el-timeline-item
								v-for="(activity, index) in taskData.taskRemind"
								:key="index"
								:color="activity.color"
								:timestamp="activity.timestamp" hide-timestamp >
								{{activity.content}}
								<!-- <el-button type="text" class="btn"  size="mini" @click="taskCheck(activity,'任务提醒')">查看</el-button> -->
								<el-popover
									popper-class="workplatformTaskRemindPopper"
									placement="right"
									@show="taskRemindPopoverShow"
									@hide="taskRemindPopoverHide"
									trigger="click">
									<el-table class="workplatformTaskRemindTable" border max-height="500" :data="activity.tableData">
										<el-table-column width="120"  :property="taskData.taskRemindHead_property[0]" :label="taskData.taskRemindHead[0]"></el-table-column>
										<el-table-column width="160"  :property="taskData.taskRemindHead_property[1]" :label="taskData.taskRemindHead[1]"></el-table-column>
										<el-table-column width="160"  :property="taskData.taskRemindHead_property[2]" :label="taskData.taskRemindHead[2]"></el-table-column>
										<el-table-column width="160"  :property="taskData.taskRemindHead_property[3]" :label="taskData.taskRemindHead[3]"></el-table-column>
									</el-table>
									<el-button  type="text" class="btn"  size="mini" @click="taskCheck(activity,'任务提醒',index)"
									slot="reference">查看</el-button>
								</el-popover>
							</el-timeline-item>
						</el-timeline>
					</div>
					<div class="taskRemindBack" ref="taskRemindBack"></div>
				</el-tab-pane>
				<el-tab-pane label="我的班级" name="grade" class="grade">
					<div class="box-myclass scrollbarstyle">
						<span class="nodataLable" style="margin-top:1.4rem;" v-if="!gradeData.data||gradeData.data.length==0">暂无数据</span>
						<el-collapse v-else v-model="gradeData.selectClass" accordion @change="selectClassChange">
							<el-collapse-item v-for="(classInfo,ci) in gradeData.data" :key="ci" :name="ci">
								<template slot="title">
									<div class="box-classHead">
										<div class="classInfo">
											<div class="rect">
												<span class="clsname" :title="classInfo.className">{{classInfo.className}}</span>
												<i v-if="classInfo.isshow" class="el-icon-arrow-down"></i>
												<i v-else class="el-icon-arrow-right"></i>
											</div>
											<div class="triangle"></div>
										</div>
										<div v-if="classInfo.courseType!=2" class="courseInfo">
											<span style="margin-right:0.05rem;display: inline-block;max-width: 1.76rem;height: 0.48rem;
											overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
											:title="classInfo.courseName"
											>{{classInfo.courseName}}</span>
											<span style="margin-right:0.05rem;">{{classInfo.checkTimes}}</span>
											<span>{{classInfo.times}}</span>
										</div>
										<div v-else class="courseInfo">
											<span>{{classInfo.times}}</span>
										</div>
										<div v-if="classInfo.isCheck" class="signInfo">
											<span class="txt">签到</span>
											<i style="color:#07cc15;" class="el-icon-success"></i>
										</div>
										<div v-else class="signInfo">
											<span class="txt">未签到</span>
											<i style="color:#3885f8;" class="el-icon-warning"></i>
										</div>
									</div>
								</template>
								<div class="box-students">
									<div class="box-studpopover" v-for="(stu,si) in classInfo.students" :key="si" >
										<el-popover
											v-model="stu.popupVisible"
											placement="right"
											width="100"
											trigger="click">
											<div class="moreBox">	
												<el-button v-for="mode in signin_mode"
												type="primary" plain size="mini" :key="mode.value" @click="alterSigninMode(mode.value,stu)">{{mode.name}}</el-button>
											</div>
											<div class="studentItem" slot="reference">
												<div class="studentName" :title="stu.studentName">{{stu.studentName}}</div>
												<div class="signState" :signMode="stu.signinMode"></div>
												<i style="font-size: 0.12rem;" class="el-icon-arrow-right"></i>
											</div>
										</el-popover>
									</div>
								</div>
								<div class="box-bottom">
									<div class="box-signMode">
										<div class="signItem" v-for="mode in signin_mode" :key="mode.value">
											<div class="signState" :signMode="mode.value"></div>
											<span>{{mode.name}}</span>
										</div>
									</div>
									<el-button class="btn" type="primary" size="mini" @click="signinOk(classInfo.students,ci)">确定</el-button>
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>

				</el-tab-pane>
			</el-tabs>
			<!-- 我的报表 -->
			<div class="myWorkTable">
				<el-row class="box-title">
					<span style="font-size:0.2rem;">我的报表</span>
					<el-radio-group class="timeselect" v-model="reportData.radio" size="mini" style="top:0.1rem;"  @change="workTableChangeTime">
						<el-radio-button label="今日"></el-radio-button>
						<el-radio-button label="近7天"></el-radio-button>
						<el-radio-button label="本月"></el-radio-button>
						<el-radio-button label="一年" :disabled="reportData.workTableradio==10"></el-radio-button>
						<el-radio-button label="自定义" :disabled="reportData.workTableradio==10" ref="selfBtn"></el-radio-button>
					</el-radio-group>
					<el-date-picker
						v-model="reportData.selfTime" @change="updateSelfTime"
						type="datetimerange"
						ref="selfTime"
						range-separator="至"
						start-placeholder="开始日期" 
						end-placeholder="结束日期"
						 :default-time="['00:00:00', '23:59:59']">
					</el-date-picker>
				</el-row>
				<div class="box-worktableMain">
					<div class="box-radioBtn">
						<div class="radioItem first" :select="reportData.workTableradio==1" @click="workTableChangeType(1)">总预收款</div>
						<div class="radioItem" :select="reportData.workTableradio==2" @click="workTableChangeType(2)">总消课收入</div>
						<div class="radioItem" :select="reportData.workTableradio==3" @click="workTableChangeType(3)">总学员</div>
						<div class="radioItem" :select="reportData.workTableradio==4" @click="workTableChangeType(4)">新增咨询</div>
						<div class="radioItem" :select="reportData.workTableradio==5" @click="workTableChangeType(5)">新增试听</div>
						<div class="radioItem last" :select="reportData.workTableradio==6" @click="workTableChangeType(6)">新增报名</div>
						<div class="radioItem first row2" :select="reportData.workTableradio==7" @click="workTableChangeType(7)">总退费款</div>
						<div class="radioItem row2" :select="reportData.workTableradio==8" @click="workTableChangeType(8)">招生漏斗</div>
						<div class="radioItem row2" :select="reportData.workTableradio==9" @click="workTableChangeType(9)">渠道分析</div>
						<div class="radioItem last row2" :select="reportData.workTableradio==10" @click="workTableChangeType(10)">微官网分析</div>
					</div>
					<div class="box-chartWTB">
						<div v-show="reportData.workTableradio<8" class="left">
							<div class="leftbox1">
								<el-row class="txt1">数据分析</el-row>
								<el-row class="txt2">
									<span class="num">{{reportData.totalIncome}}</span>
									<span class="unit">{{reportData.totalIncomeUnit}}</span>
								</el-row>
								<el-row class="txt3">{{reportData.totalIncomeTxt}}</el-row>
							</div>
							<div class="splitline"></div>
							<div class="leftbox2">
								<el-row class="txt1" :style="{'color':reportData.increase?'#FF5252':'#96d34d'}">
									<span class="num" :style="{'margin-left':(reportData.compareLastday)>99999?'-0.08rem':'0'}">
										<span  v-if="reportData.increase&&(reportData.compareLastday!=0)"  >+</span>
										<span  v-else-if="!reportData.increase&&(reportData.compareLastday!=0)">-</span>
										<span :style="'margin-left:'+(reportData.compareLastday==0?'0rem;':'-0.1rem;')">{{(reportData.compareLastday+'').replace('+','').replace('e','E')}}</span>
									</span>
									<span class="unit" style="margin-left: -0.07rem;"> 
										<span>%</span>
										<span class="arrow" v-if="reportData.increase&&(reportData.compareLastday!=0)" style="margin-left: -0.06rem;">▲</span>
										<span class="arrow" v-else-if="!reportData.increase&&(reportData.compareLastday!=0)"  style="margin-left: -0.06rem;">▼</span>
									</span>

									<!-- <span class="num" v-if="reportData.increase">+</span>
									<span class="num" v-else>-</span>
									<span class="num">{{(reportData.compareLastday+'').replace('+','').replace('e','E')}}</span>
									<span class="unit">%</span>
									<span class="unit arrow" v-if="reportData.increase">▲</span>
									<span class="unit arrow" v-else>▼</span> -->

								</el-row>
								<el-row class="txt2">较{{reportData.timeType}}比较</el-row>
							</div>
						</div>
						<div v-show="reportData.workTableradio<8&&!reportData.chartNoData" class="chartbox" ref="workTableChart"></div>
						<div v-show="reportData.workTableradio<8&&reportData.chartNoData"
						class="chartboxNodataLable" ref="workTableChartNodataLable">
							<span>暂无数据</span>
						</div>
						<div v-show="reportData.workTableradio>=8" class="box-fullChart">
							<div v-show="!reportData.fullChartNoData">
								<span class="txt">数据分析</span>
								<div v-show="reportData.workTableradio==8" class="chart_loudou" ref="loudouChart"></div>
								<div v-show="reportData.workTableradio==9" class="chart_qudao" ref="qudaoChart"></div>
								<div v-show="reportData.workTableradio==10" class="chart_website" ref="websiteChart"></div>
							</div>
							<div v-show="reportData.fullChartNoData" style="width:100%;" class="chartNodata">
								<span>暂无数据</span>
							</div>
						</div>
					</div>
					
				</div>
			</div>	
			<!-- 广告 -->
			<div class="carouselBox" v-if="adsList.length>0">
				<el-carousel trigger="click" :interval="10000" height="3.2rem">
					<el-carousel-item v-for="(item,index) in adsList" :key="index">
						<a v-if="item.contentLink" :href="item.contentLink" target="_blank">
							<img :src="item.adPic" style="width:100%;height:100%;" />
						</a>
						<a v-else>
							<img :src="item.adPic" style="width:100%;height:100%;" />
						</a>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="carouselBox" v-else>
				<el-carousel trigger="click" :interval="10000" height="3.2rem">
					<el-carousel-item>
						<a>
							<img src="../../assets/img/workPlatform/banner2_02.png" style="width:100%;height:100%;" />
						</a>
					</el-carousel-item>
				</el-carousel>
			</div>
			<!-- 我的课表 -->
			<div class="classTableBox"
				v-loading="syllabusData.dataloading"
				element-loading-text="拼命加载中"
				element-loading-background="rgba(255, 255, 255, 0.5)">
				<syllabusCalendar ref="syllabusCalendar" :syllabusData="syllabusData"></syllabusCalendar>
			</div>	
		</div>
		
		<!-- <clueAdd ref="clueAdd" @callback="closeAdd"></clueAdd> -->
		<clueEdit ref="clueEdit" @callback="closeEdit"></clueEdit>
		<!-- <clueImport ref="clueImport" @callback="closeImport"></clueImport> -->
		<clueDetail ref="clueDetail" @openRelease="openRelease" @openEdit="openEdit" @openVisitAdd="openVisitAdd"></clueDetail>
		<!-- <clueAllot ref="clueAllot" @callback="closeAllot"></clueAllot> -->
		<clueRelease ref="clueRelease" @callback="closeRelease"></clueRelease>
		<!-- <clueEnroll ref="clueEnroll" @callback="closeEnroll"></clueEnroll> -->
		<!-- <payEarnest ref="payEarnest" @callback="closePayEarnest"></payEarnest> -->
		<!-- <visitRecord ref="visitRecord"></visitRecord> -->
		<visitAdd ref="visitAdd" @callback="closeVisitAdd"></visitAdd>

	</div>
</template>

<script>
	import setCampusTime from '@/js/common/setCampusTime';
	// import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import syllabusCalendar from './syllabus/syllabusCalendar';//课程表
	import syllabusList from './syllabus/syllabus_list';//顶部课节列表
	// import clueAdd from './subpage/clue_add'
	// import clueImport from './subpage/clue_import'
	import clueEdit from '../clue_manage/subpage/clue_edit'
	import clueDetail from '../clue_manage/subpage/clue_detail'
	// import clueAllot from './subpage/clue_allot'
	import clueRelease from '../clue_manage/subpage/clue_release'
	// import clueEnroll from './subpage/clue_enroll'
	// import payEarnest from './subpage/pay_earnest'
	// import visitRecord from './subpage/visit_record'
	import visitAdd from '../clue_manage/subpage/visit_add'

	export default{
		components:{syllabusCalendar,syllabusList,clueEdit,clueDetail,clueRelease,visitAdd},
		// props:[''],
		data(){
			return {
				tabs_task_grade:'task',
				timelinereverse:false,
				//我的任务
				taskData:{
					radio:'今日',
					//任务日程
					taskActivities: [
						// {
						// content: '活动按期开始',
						// timestamp: '2018-04-11',
						// color: '#3885f8'
						// }, {
						// content: '通过审核',
						// timestamp: '2018-04-13'
						// }, {
						// content: '创建成功',
						// timestamp: '2018-04-14'
						// }
					],
					//任务提醒
					taskRemind:[
						// {
						// content: '活动按期开始',
						// timestamp: '2018-04-10',
						// color: 'rgb(255,185,31)'
						// }, {
						// content: '通过审核',
						// timestamp: '2018-04-13'
						// }, {
						// content: '创建成功',
						// timestamp: '2018-04-15'
						// }
					],
					taskRemindHead:[
						'姓名','班级','费用截止日期','欠费金额'
					],
					taskRemindHead_property:['studentName','className','deadline','money']
				},
				//我的班级
				gradeData:{
					isFirst:false,
					selectClass:'',
					data:[]
				},
				//我的报表
				reportData:{
					radio:'今日',
					pre_radio:'今日',
					workTableradio:1,
					selfTime:[new Date(), new Date()],
					totalIncome:0,
					totalIncomeUnit:'',
					totalIncomeTxt:'总收入',
					compareLastday:0,
					incomeData:[],
					primaryData:null,
					timeType:'昨日',
					chartNoData:false,
					/**漏斗图/渠道分析/微官网是否没有数据 */
					fullChartNoData:false,
					fullChart_startTime:null,
					fullChart_endTime:null,
				},
				//我的课表
				syllabusData:{
					classtext:'',//班级
					teachertext:'',//教师
					classroomtext:'',//教室
					coursetext:'',//课程
					headerType:true,//工作台 true / 教务管理 false
					radio:'今日',
					currentTime:'2019-04-02',//当前显示时间
					/**数据加载等待 */
					dataloading:false,
					//教室或助教ID（用于课表过滤）add by hym 20190520
					teacherOrAssitUserId:JSON.parse(tool.getItem(lsKey.user)).userId,
					containTrialClass:1
				},
				//广告轮播
				adsList:[],
				signin_mode:[],
			}
		},
		methods:{
			init(){
				this.initData();
			},
			//公共函数
			/**初始化数据 */
			initData(){
				let vm = this;
				this.bill_mode=tool.getDictNameByValue(-100,'bill_mode');
				let userinfo=JSON.parse(tool.getItem(window.lsKey.user));
				this.userId=userinfo.userId;
				this.campusId=this.$store.state.campusId;
				//我的任务数据更新
				this.taskActivitiesUpdateByTime();
				this.taskRemindUpdateByTime();
				//我的班级
				this.updateMyClassData();
				//我的报表
				this.workTableChangeTime('今日');	
				//广告
				this.updateAdsList();	
				//初始化课表
				let param = {campusId : this.$store.state.campusId}	          	   	          	 
				api.getListOfCampus(param).then(function(data){
					
					setCampusTime(data.list);
					vm.$refs.syllabusCalendar.init();
				})
				
			},
			campusChange : function(campusId) { //校区改变
				this.campusId = campusId;
				this.initData();
				this.$refs.syllabusCalendar.campusChange(campusId);
			},
			/**广告 */
			updateAdsList(){
				let self=this;
				api.getCarouselAdsWP({campusId:this.campusId}).then(function(d){
					if(d.result=='操作成功'){
						// console.log(d);
						self.adsList=d.list;
					}
				});
			},
			//我的任务
			/**切换时间 */
			taskChangeTime(d){
				this.taskActivitiesUpdateByTime();
				// this.taskRemindUpdateByTime(timeobj.startTime,timeobj.endTime);
			},
			/**我的任务日程列表数据更新
			 */
			taskActivitiesUpdateByTime(){
				let type=this.taskData.radio;
				let timeobj;
				if(type=='今日'){
					timeobj=tool.getTimeObjByType(1);
				}
				else if(type=='本周'){
					timeobj=tool.getTimeObjByType(2);
				}
				let startTime=timeobj.startTime,endTime=timeobj.endTime;
				let self=this;
				api.getTaskInfoList({campusId:this.campusId,startTime:startTime,endTime:endTime}).then(function(d){
					// console.log(d)
					let result=[];
					for(let i=0,count=d.taskList.length;i<count;i++){
						let row=d.taskList[i];
						let day=row.taskTime;
						for(let j=0;j<row.taskInfoList.length;j++){
							let rowj=row.taskInfoList[j];
							result.push({
								content: rowj.name,
								timestamp: day,
								color: '#3885f8',

								taskInfoId:rowj.taskInfoId,
								businessId:rowj.businessId,
								type:rowj.type,
								clueId:rowj.clueId,
								clueVisitId:rowj.clueVisitId
							});
						}
					}
					result.sort((a,b)=>{
						let ta=new Date(a.timestamp.replace(/-/g,'/'));
						let tb=new Date(b.timestamp.replace(/-/g,'/'));
						if(ta>=tb)return 1;
						else return -1;
					});
					self.taskData.taskActivities=result;

				});
			},
			/**我的任务提醒列表数据更新*/
			taskRemindUpdateByTime(){
				let self=this;
				api.getRemindinfolist({campusId:this.campusId}).then(function(d){
					// console.log(d)
					let arrearage=d.arrearage.total||0;
					let renew=d.renew.total||0;
					let pending=d.pending.total||0;
					self.taskData.taskRemind=[{
						content: '有'+arrearage+'名欠费学员',
						timestamp: '2018-04-10',
						color: 'rgb(255,185,31)',
						tableData:d.arrearage.list
						}, {
						content: '有'+renew+'名待续费学员',
						timestamp: '2018-04-13',
						color: 'rgb(255,185,31)',
						tableData:d.renew.list
						}, {
						content: '有'+pending+'个待处理申请',
						timestamp: '2018-04-15',
						color: 'rgb(255,185,31)',
						tableData:d.pending.list
					}];
				});
			},
			/**查看 */
			taskCheck(data,type,index=-1){
				if(type=='任务日程'){
					let clueDetail=this.$refs.clueDetail;
					api.clueDetail({clueId:data.clueId}).then(function(d){
						// console.log(d)
						if(d.result=='操作成功'){
							clueDetail.init(d.info);
						}
						
					});
				}
				else{
					let head=[
						['姓名','班级','费用截止日期','欠费金额'],
						['姓名','班级','费用截止日期','家长电话'],
						['类型','姓名','班级','提交日期']
					];
					this.taskData.taskRemindHead=head[index];
					let fields=[
						['studentName','className','deadline','money'],
						['studentName','className','deadline','phone'],
						['type','studentName','className','commitTime'],
					];
					this.taskData.taskRemindHead_property=fields[index];
				}
			},
			taskRemindPopoverShow(){
				this.$refs.taskRemindBack.style.display='block';
			},
			taskRemindPopoverHide(){
				this.$refs.taskRemindBack.style.display='none';
			},

			//我的班级
			/**更新我的班级数据 */
			updateMyClassData(){
				let self=this;
				let today=tool.getTimeObjByType(1);
				api.getMyClassInfoList({campusId:this.campusId,startTime:today.startTime,endTime:today.endTime})
				.then(function(d){
					self.gradeData.data=[];
					for(let i=0;i<d.list.length;i++){
						let row=d.list[i];
						let start=row.startTime.split(' ');
						let end=row.endTime.split(' ')[1];
						let timestr=start[1]+'-'+end;
						if(row.courseType==2){
							timestr=start[0];
						}
						self.gradeData.data.push({
							isCheck:row.signinMode===1,
							checkTimes:'第'+row.orderBy+'次',
							times:timestr,
							className:row.className,
							courseName:row.courseName,
							courseType:row.courseType,//区分全日班 2-全日班；其他-非全日班
							classId:row.classId,
							classSyllabusId:row.classSyllabusId,
							attendMode:row.attendMode,
							classHour:row.classHour,
							isshow:false,
							students:[],
							classOrTrialClass:row.classOrTrialClass
						});
					}
				});
			},
			/**修改学员考勤 */
			alterSigninMode(val,stu){
				stu.signinMode=val;
				stu.alterMode=true;
				stu.popupVisible=false;
			},
			/**切换班级 */
			selectClassChange(val){
				let row=this.gradeData.data[val];
				if(!row){
					this.gradeData.data.forEach(cc=>{
						cc.isshow=false;
					});
					return;
				}
				if(row.isshow){
					row.isshow=false;
				}
				else{
					row.isshow=true;
					this.updateMyStudentsData(row,val);
				}
			},
			/**更新班级下，学生列表数据 */
			updateMyStudentsData(param,index){
				let self=this;
				//试听班级
				if(param.classOrTrialClass==2){
					api.getTrialClassStudentList({
						classId:param.classId,
						classSyllabusId:param.classSyllabusId
					}).then(function(d){
						let isFirst=true;
						for(let i=0;i<d.list.length;i++){
							if(d.list[i].signinMode==0){
								d.list[i].signinMode=1;
							}else{
								isFirst=false;
							}
							d.list[i].alterMode=false;
							d.list[i].popupVisible=false;
							d.list[i].studentName=d.list[i].realName;
							d.list[i].classSyllabusId=param.classSyllabusId;
						}
						self.gradeData.isFirst=isFirst;
						self.gradeData.data[index].students=d.list;

					});
				}
				//正常班级
				else{
					api.getMyStudentSiginInfoList({
						classId:param.classId,
						classSyllabusId:param.classSyllabusId
					}).then(function(d){
						if(d.list)
						{
							let isFirst=true;
							for(let i=0;i<d.list.length;i++){
								if(d.list[i].signinMode==0)d.list[i].signinMode=1;
								else isFirst=false;
								d.list[i].alterMode=false;
								d.list[i].popupVisible=false;
								d.list[i].classSyllabusId=param.classSyllabusId;
							}
							self.gradeData.isFirst=isFirst;
							self.gradeData.data[index].students=d.list;
						}

					});
				}
				
			},
			/**考勤按钮 */
			signinOk(studentsList,index){
				let isFirst=this.gradeData.isFirst;
				let paramStudents=[];
				for(let i=0;i<studentsList.length;i++){
					let row=studentsList[i];
					if(row.alterMode)paramStudents.push(row);
				}
				if(isFirst)paramStudents=studentsList;
				if(paramStudents.length===0){
					this.$message({
						type:'warning',
						message:'请先修改学员考勤状态！'
					});
					return;
				}
				let type=isFirst?1:2;
				this.setMyClassAttendMode(type,paramStudents,index)
			},
			/**设置我的班级签到情况
			 * @param type 1-第一次新增；2-修改
			 * classSyllabusId
			 * studentIds
			 */
			setMyClassAttendMode(type,studentsList,index){
				let self=this;
				let classSyllabusId;
				let searchParam_alter=[],searchParam_add=[];
				let classInfo=this.gradeData.data[index];
				for(let i=0;i<studentsList.length;i++){
					let row=studentsList[i];
					let usehour=classInfo.classHour;
					//迟到、请假、旷课
					if(row.signinMode==2||row.signinMode==3||row.signinMode==5){
						usehour=0;
					}
					if(type==2)//修改
					{
						searchParam_alter.push({
							classSyllabusId: classInfo.classSyllabusId,
							classId:row.classId,
							studentId: row.studentId,
							signinMode: row.signinMode,
							consumeHour: usehour,
							siginUserId: this.userId,
							classSigninId:row.classSigninId,
							signinTime: tool.getTimeObjByType(-1).now,
							clueId:row.clueId||''
						});
					}
					else//新增
						searchParam_add.push({
							classSyllabusId: classInfo.classSyllabusId,
							classId:row.classId,
							studentId: row.studentId,
							signinMode: row.signinMode,
							consumeHour: usehour,
							siginUserId: this.userId,
							classSigninId:row.classSigninId,
							signinTime: tool.getTimeObjByType(-1).now,
							clueId:row.clueId||''
						});
					
				}
				//试听班级
				if(classInfo.classOrTrialClass==2){
					//修改和新增 同一接口
					let trialSearchParam={
						classId:classInfo.classId,
						classSyllabusId:classInfo.classSyllabusId,
						siginList:searchParam_alter.concat(searchParam_add)
					};
					api.applyTrialClassSignin(trialSearchParam).then(function(d){
						if(d.resultCode==2000){
							self.$message({
								message: '操作成功！',
								type: 'success'
							});
							self.gradeData.data[index].isCheck=true;
						}
						else{
							self.$message({
								message: d.message||'操作失败！',
								type: 'warning'
							});
						}
						self.updateMyStudentsData(classInfo,index);
					});
				}
				//普通班级
				else{
					//新增
					if(type==1)
						api.addAttendence(searchParam_add).then(function(d){
							if(d.resultCode==2000){
								self.$message({
									message: '操作成功！',
									type: 'success'
								});
								self.gradeData.data[index].isCheck=true;
							}
							else{
								self.$message({
									message: d.message||'操作失败！',
									type: 'warning'
								});
							}
							self.updateMyStudentsData(classInfo,index);
						});
					//修改
					else
						api.updateAttendenceBatch(searchParam_alter).then(function(d){
							if(d.resultCode==2000){
								if(!d.conflictRow||d.conflictRow.length==0)
									self.$message({
										message: '修改成功',
										type: 'success'
									});
								else
									self.$message({
										message: d.conflictRow[0],
										type: 'warning'
									});
								self.gradeData.data[index].isCheck=true;
							}
							else{
								self.$message({
									message: d.message||'操作失败！',
									type: 'warning'
								});
							}
							self.updateMyStudentsData(classInfo,index);
						});
				}
				
			},
			//我的报表
			/**
			 * 更新我的报表数据
			 * startTime 开始时间
			 * endTime 结束时间
			 * type 统计类型：1-总预收款；2-总课消收入...6：新增报名
			 * istype 更新类型，决定是否重新获取数据
			 */
			updateMyReportDataByTimeAndType(startTime,endTime,type,istype=false){
				let self=this;
				if(type<8){
					let fieldsList=[
						{name:'billMode',value:'totalMoney'},
						{name:'courseName',value:'totalMoney'},
						{name:'courseName',value:'studentCount'},
						{name:'executeUserName',value:'clueCount'},
						{name:'executeUserName',value:'studentCount'},
						{name:'executeUserName',value:'studentCount'},
						{name:'billMode',value:'totalMoney'},//总退费款
					];
					let curFields=fieldsList[type-1];
					if(istype){
						let row=getRowByType(self.reportData.primaryData);
						updateByData(row,curFields);
					}
					else{
						api.getWorkTable({campusId:self.campusId,startTime:startTime,endTime:endTime}).then(function(d){
							let list=d.list;
							if(list.length>0){
								self.reportData.primaryData=list;
							}
							let row=getRowByType(list);
							updateByData(row,curFields);
							
						});
					}
				}
				
				//新增漏斗图、渠道分析、微官网分析
				this.reportData.fullChartNoData=false;
				if(type===8){
					// debugger
					this.$nextTick(()=>{
						api.cluestatistic({
							campusId:self.campusId,
							startTime:this.reportData.fullChart_startTime,
							endTime:this.reportData.fullChart_endTime
						}).then(function(d){
							if(d.result=='操作成功'){
								let chartdata=[],tabledata={};
								//漏斗图
								let zixun=0,genjing=0,yixiang=0,baoming=0;
								d.info.currentClueStatistic.forEach(ele=>{
									zixun+=ele.count;
									if((ele.clueStatus>=2&&ele.clueStatus<=6)||ele.clueStatus==8)genjing+=ele.count;
									if(ele.clueStatus==4)yixiang+=ele.count;
									if(ele.clueStatus==6)baoming+=ele.count;
								});
								let sdata=[{name:'咨询',value:zixun},{name:'已跟进',value:genjing},
								{name:'已试听',value:yixiang},{name:'已报名',value:baoming}];
								// if(self.funnelchart)
								self.loadLoudouChart(sdata);
							}
						});
						
					});
				}
				else if(type===9){
					this.$nextTick(()=>{
						api.cluechannelstatistic({
							campusId:self.campusId,
							startTime:this.reportData.fullChart_startTime.replace(/-/g,'/'),
							endTime:this.reportData.fullChart_endTime.replace(/-/g,'/')
						}).then(function(d){
							//渠道分析
							if(d.result=='操作成功'){
								let result=[];
								d.list.forEach(ele=>{
									result.push({
										name:ele.name,
										value:ele.count
									});
								});
								//重新加载图表
								self.loadQudaoChart(result);
							}
						});
					});
				}
				else if(type===10){
					api.reportOfWebsite({
							campusId:self.campusId,
							startTime:this.reportData.fullChart_startTime,
							endTime:this.reportData.fullChart_endTime
						}).then(function(d){
						if(d.result=='操作成功'){
							self.loaWebSiteChart(d.info.dayStatisticsOfWebsiteList);
						}
					});
				}

				function getRowByType(data){
					for(let i=0;i<data.length;i++){
						if(data[i].type==type)
						return data[i];
					}
				}
				function updateByData(data,curFields){
					// console.log(data)
					let row=data;
					//万
					let sum=row.num,unit=row.numUnit;
					let chuyi=1;
					if(sum.toString().length>8){
						sum=(sum/10000).toFixed(1);
						unit='万'+unit;
						chuyi=10000;
					}
					//科学计数法
					let numCompared=Math.abs(row.numCompared);
					if(numCompared>999999){
						numCompared=numCompared.toExponential(2);
					}

					self.reportData.totalIncome=sum;
					self.reportData.totalIncomeUnit=unit;
					self.reportData.increase=row.increase;
					self.reportData.compareLastday=numCompared;
					self.reportData.incomeData=[];
					for(let i=0;i<row.statisticList.length;i++){
						let temp=row.statisticList[i];
						let name=temp[curFields.name];
						if(temp.billMode){
							for(let j=0;j<self.bill_mode.length;j++){
								if(self.bill_mode[j].value==temp.billMode){
									name=self.bill_mode[j].name;
									break;
								}
							}
						}
						let value=temp[curFields.value]/chuyi;
						self.reportData.incomeData.push({
							name:name,
							value:value||0
						});
					}
					self.loadReportChart();//柱状图
				}
			},
			/**创建柱状图 */
			loadReportChart(){
				var rem = window.rem;
				if(!this._reportChart){
					this._reportChart=window.$echarts.init(this.$refs.workTableChart);
				}
				let chart=this._reportChart;
				let xdata=[],sdata=[];
				let data=this.reportData.incomeData;
				this.reportData.chartNoData=false;
				if(!data||data.length==0){
					this.reportData.chartNoData=true;
				}
				let unit=this.reportData.totalIncomeUnit;
				for(let i=0;i<data.length;i++){
					let row=data[i];
					let xname=row['name']||'';
					if(xname.length>4){
						xname=xname.substr(0,4)+'...';
					}
					xdata.push(xname);
					sdata.push(row['value']);
				}
				let dataZoom=null;
				if(xdata.length>10){
					dataZoom=[{
						type: 'slider',
						show: true,
						xAxisIndex: [0],
						top: 2.6*rem,
						bottom: 0.07*rem,
						left: 0.3*rem,
						right : 0.3*rem,
						startValue: 0,
						endValue: 3, //初始化滚动条
						minValueSpan : 3,
						maxValueSpan : 3,
						showDetail : false,
						showDataShadow : false,
						// backgroundColor : "red",
						fillerColor : "#9092984d",
						borderColor : "#DCDFE6",
						handleStyle : {
							opacity : 0
						}
					}];
				}
				let option = {
					grid:{
						left:0.26*rem,
						top:0.5*rem,
						bottom:0.16*rem,
						right:0.26*rem,
						containLabel:true
					},
					xAxis: {
						type: 'category',
						z:11,
						data: xdata,
						axisLine:{
							show:true,
							lineStyle:{
								color:'#999999'
							}
						},
						axisTick:{
							show:false
						},
						axisLabel:{
							// interval:0,
							fontSize:0.14*rem,
							color:'#333333',
							fontWeight:'normal',
							rotate:30,
							inside:false,
							show:true,
							// formatter: function(value) {
							// 	var ret = ""; //拼接加\n返回的类目项
							// 	var maxLength = 1; //每项显示文字个数
							// 	var valLength = value.length; //X轴类目项的文字个数
							// 	var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
							// 	if (rowN > 1) //如果类目项的文字大于3,
							// 	{
							// 		for (var i = 0; i < rowN; i++) {
							// 			var temp = ""; //每次截取的字符串
							// 			var start = i * maxLength; //开始截取的位置
							// 			var end = start + maxLength; //结束截取的位置
							// 			//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
							// 			temp = value.substring(start, end) + "\n";
							// 			ret += temp; //凭借最终的字符串
							// 		}
							// 		return ret;
							// 	} else {
							// 		return value;
							// 	}
							// },
						},
						// splitLine:{
						// 	show:false,
						// 	lineStyle:{
						// 		color:'#f7f7f7',
						// 		width:1
						// 	}
						// }
					},
					yAxis: {
						type: 'value',
						name:"("+unit+")",
						nameTextStyle:{
							padding:[0,0,0,-0.4*rem],
							color:'#666666',
							fontSize:0.14*rem
						},
						axisLabel:{
							color:'#666666',
							fontSize:0.16*rem,
							fontWeight:'normal',
							// formatter: function (value, index){
								
							// 	if(value>99999){
							// 		value=value.toExponential(2);
							// 		value=(value+'').replace('+','').replace('e','E');
							// 	}
							// 	return value;
							// }
						},
						axisLine:{
							show:false
						},
						axisTick:{
							show:false
						},
						splitLine:{
							show:true,
							lineStyle:{
								color:'#f7f7f7',
								width:0.01*rem
							}
						},
						minInterval : 1
					},
					tooltip:{
						// trigger:'axis'
					},
					dataZoom: dataZoom,
					series: [{
						data: sdata,
						type: 'bar',
						itemStyle:{
							color:'rgb(56,133,249)',//rgb(255,210,69)
							barBorderRadius:[0.10*rem, 0.10*rem, 0, 0],
							
						},
						label:{
							show:false,
							color:'#333333',
							fontWeight:'normal',
							position: 'insideBottom',
							distance: 1.50*rem,
							align: 'left',
							verticalAlign: 'middle',
							rotate: -90,
							formatter: '{b}',
							fontSize: 0.16*rem,
						},
						emphasis:{
							label:{
								show:false,
								color:'#333333',
								fontWeight:'bold'
							},
							itemStyle:{
								color:'rgb(255,210,69)',
								barBorderRadius:[0.10*rem, 0.10*rem, 0, 0]
							},
						},
						barMaxWidth:0.42*rem
					}]
				};
				chart.clear();
				chart.setOption(option,true);
				this._reportChart=chart;
			},
			/**渠道分析 */
			loadQudaoChart(insdata){
				var rem = window.rem;
				let chart=this._qudaoChart;
				if(!chart){
					chart=window.$echarts.init(this.$refs.qudaoChart);
				}
				if(!insdata||insdata.length==0){
					this.reportData.fullChartNoData=true;
					return;
				}
				let xdata=[],sdata=[];
				let data=insdata;
				let unit='个';
				for(let i=0;i<data.length;i++){
					let row=data[i];
					let xname=row['name']||'';
					if(xname.length>4){
						xname=xname.substr(0,4)+'...';
					}
					xdata.push(xname);
					sdata.push(row['value']);
				}
				let option = {
					grid:{
						left:'4%',
						top:'12%',
						bottom:'4%',
						right:0.26*rem,
						containLabel:true
					},
					xAxis: {
						type: 'category',
						z:11,
						data: xdata,
						axisLine:{
							show:true,
							lineStyle:{
								color:'#999999'
							}
						},
						axisTick:{
							show:false
						},
						axisLabel:{
							// interval:0,
							fontSize:0.14*rem,
							color:'#333333',
							fontWeight:'normal',
							rotate:30,
							inside:false,
							show:true,
						},
					},
					yAxis: {
						type: 'value',
						// name:"("+unit+")",
						nameTextStyle:{
							padding:[0,0,0,-0.4*rem],
							color:'#666666',
							fontSize:0.14*rem
						},
						axisLabel:{
							color:'#666666',
							fontSize:0.16*rem,
							fontWeight:'normal',
						},
						axisLine:{
							show:false
						},
						axisTick:{
							show:false
						},
						splitLine:{
							show:true,
							lineStyle:{
								color:'#f7f7f7',
								width:0.01*rem
							}
						},
						minInterval : 1
					},
					tooltip:{
						// trigger:'axis'
					},
					series: [{
						data: sdata,
						type: 'bar',
						itemStyle:{
							color:'rgb(56,133,249)',//rgb(255,210,69)
							barBorderRadius:[0.10*rem, 0.10*rem, 0, 0],
							
						},
						label:{
							show:false,
							color:'#333333',
							fontWeight:'normal',
							position: 'insideBottom',
							distance: 1.50*rem,
							align: 'left',
							verticalAlign: 'middle',
							rotate: -90,
							formatter: '{b}',
							fontSize: 0.16*rem,
						},
						emphasis:{
							label:{
								show:false,
								color:'#333333',
								fontWeight:'bold'
							},
							itemStyle:{
								color:'rgb(255,210,69)',
								barBorderRadius:[0.10*rem, 0.10*rem, 0, 0]
							},
						},
						barMaxWidth:0.42*rem
					}]
				};
				chart.setOption(option);
				this._qudaoChart=chart;
			},
			/**微官网分析 */
			loaWebSiteChart(insdata) {
				var rem = window.rem;
				let chart=this._websiteChart;
				if(!chart){
					chart=window.$echarts.init(this.$refs.websiteChart);
				}
				
				if(!insdata||insdata.length==0){
					this.reportData.fullChartNoData=true;
					return;
				}
				let xdata=[],s1_data=[],s2_data=[],s3_data=[];
				let websiteData=insdata;
				websiteData.forEach(ele=>{
					let timestr=ele.viewDate.split('-');
					xdata.push(timestr[1]+'月'+timestr[2]+'日');
					s1_data.push(ele.viewCount);
					s2_data.push(ele.visitorCount);
					s3_data.push(ele.clueCount);
				});
				var maxValue = (websiteData.length==0? 0 : Math.max.apply(null,websiteData) );
				var len = maxValue.toString().length;
				let dataZoom=null;
				if(xdata.length>4){
					dataZoom=[{
						type: 'slider',
						show: true,
						xAxisIndex: [0],
						top: 2.16*rem,
						bottom: 0.07*rem,
						left: 0.3*rem,
						right : 0.3*rem,
						startValue: 0,
						endValue: 3, //初始化滚动条
						minValueSpan : 3,
						maxValueSpan : 3,
						showDetail : false,
						showDataShadow : false,
						// backgroundColor : "red",
						fillerColor : "#9092984d",
						borderColor : "#DCDFE6",
						handleStyle : {
							opacity : 0
						}
					}];
				}
				var option = {
					grid : {
						top : 0.25*rem,
						right : 0.3*rem,
						left : 0.3*rem + len*0.13*rem,
						bottom : 0.4*rem
					},
					legend:{
						show:true,
						left:'center',
						top:0*rem,
						itemWidth:0.14*rem,
						itemHeight:0.14*rem,
						borderRadius: 0,
					},
					xAxis: {
						type: 'category',
						data: xdata, //列名
						axisTick : {
							show : false
						},
						axisLine:{
							show:true,
							lineStyle:{
								color:'#999999'
							}
						},
						axisLabel : {
							color : "#666666",
							fontSize : 0.16*rem,
							margin : 0.1*rem,
							interval : 0,
						},
						splitNumber : 2
					},
					yAxis: {
						type: 'value',
						axisTick : { 
							show : false
						},
						axisLabel : {
							color : "#666666",
							fontSize : 0.16*rem,
							margin : 0.1*rem
						},
						splitLine : {
							lineStyle : {
								color : "#f7f7f7"
							}
						},
						axisLine : {
							show:false
						},
						minInterval : 1
					},
					dataZoom: dataZoom,
					series: [{
							name:'访问次数',
							data: s1_data, //列值
							type: 'bar',
							itemStyle :{
								color : "#46aeff",
								barBorderRadius: [0.06*rem, 0.06*rem, 0, 0]
							},
							barWidth : 0.2*rem,
							barGap:'20%',
						},
						{
							name:'访问人数',
							data: s2_data, //列值
							type: 'bar',
							itemStyle :{
								color : "#ff9946",
								barBorderRadius: [0.06*rem, 0.06*rem, 0, 0]
							},
							barWidth : 0.2*rem,
						},
						{
							name:'线索量',
							data: s3_data, //列值
							type: 'bar',
							itemStyle :{
								color : "#67de47",
								barBorderRadius: [0.06*rem, 0.06*rem, 0, 0]
							},
							barWidth : 0.2*rem,
						},
					
					]
				};
				chart.clear()
				chart.setOption(option, true);
				this._websiteChart=chart;
			},
			/**漏斗图 */
			loadLoudouChart(insdata){
				var rem = window.rem;
				let chart=this._loudouChart;
				if(!chart){
					chart=window.$echarts.init(this.$refs.loudouChart);
				}
				if(!insdata||insdata.length==0){
					this.reportData.fullChartNoData=true;
					return;
				}
				let markPoint=[];
				let starttop=45/insdata.length+5,addtop=90/insdata.length;
				insdata.forEach((ele,index)=>{
					let y=starttop+addtop*index;
					markPoint.push({
						x:'35%',
						y:y+'%',
						value:ele.value,
					});
				});
				let option = {
					calculable: true,
					containLabel:true,
					color:['#00e1ff','#0097f0','#ffe600','#ff9322'],
					series: [
						{
							name:'漏斗图',
							type:'funnel',
							left: '5%',
							top: '5%',
							bottom: '5%',
							width: '60%',
							minSize: '30%',
							maxSize: '100%',
							sort: 'none',
							gap: 0.02*rem,
							label: {
								show: true,
								position: 'outside',
								fontSize: 0.18*rem,
								color:'#333333'
							},
							labelLine: {
								length: 0.50*rem,
								lineStyle: {
									width: 0.02*rem,
									type: 'solid'
								}
							},
							itemStyle: {
								borderColor: '#fff',
								borderWidth: 0.01*rem
							},
							markPoint:{
								symbol:'rect',
								itemStyle:{
									color:'rgba(0,0,0,0)'
								},
								label: {
									show: true,
									fontSize: 0.18*rem,
									color:'#333333'
								},
								data:markPoint
							},
							data:insdata
						}
					]
				};
				chart.clear()
				chart.setOption(option, true);
				this._loudouChart=chart;
			},
			// visibleChartBox(show){
			// 	if(show){
			// 		this.$refs.workTableChart.style.display='block';
			// 		this.$refs.workTableChartNodataLable.style.display='none';
			// 	}
			// 	else{
			// 		this.$refs.workTableChart.style.display='none';
			// 		this.$refs.workTableChartNodataLable.style.display='flex';
			// 	}
			// },
			/**切换时间 */
			workTableChangeTime(d){
				//自定义时间选取
				// console.log(d)
				if(d==='自定义'){
					this.$refs.selfTime.focus();
					this.reportData.radio=this.reportData.pre_radio;
					return;
				}
				this.reportData.selfTime=[];
				let timeobj;
				if(d=='今日'){
					timeobj=tool.getTimeObjByType(1);
					this.reportData.timeType='昨日';
				}
				else if(d=='近7天'){
					timeobj=tool.getTimeObjByType(21);
					// console.log(timeobj)
					this.reportData.timeType='过去7天';
				}
				else if(d=='本月'){
					timeobj=tool.getTimeObjByType(3);
					this.reportData.timeType='上月';
				}
				else if(d=='一年'){
					timeobj=tool.getTimeObjByType(4);
					this.reportData.timeType='去年';
				}
				this.reportData.pre_radio=d;
				let type=this.reportData.workTableradio;
				this.reportData.fullChart_startTime=timeobj.startTime;
				this.reportData.fullChart_endTime=timeobj.endTime;
				this.updateMyReportDataByTimeAndType(timeobj.startTime,timeobj.endTime,type);
			},
			/**自定义时间确认选择后 */
			updateSelfTime(d){
				// console.log(d);
				if(!d)return;
				this.reportData.radio='自定义';
				this.reportData.timeType='上一同期';
				let start=formateDate(d[0]),end=formateDate(d[1]);
				let type=this.reportData.workTableradio;
				this.updateMyReportDataByTimeAndType(start,end,type)

				function formateDate(t=new Date()){
					let year=t.getFullYear();
					let month=t.getMonth()+1;
					month=month<10?'0'+month:month;
					let day=t.getDate();
					day=day<10?'0'+day:day;
					let hour=t.getHours();
					hour=hour<10?'0'+hour:hour;
					let minute=t.getMinutes();
					minute=minute<10?'0'+minute:minute;
					let second=t.getSeconds();
					second=second<10?'0'+second:second;
					return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
				}
			},
			/**切换类型 */
			workTableChangeType(d){
				 //console.log(d);
				this.reportData.workTableradio=d;
				if(d===1||d===2){
					this.reportData.totalIncomeTxt='总收入';
				}
				else if(d===7){
					this.reportData.totalIncomeTxt='总退费';
				}
				else{
					this.reportData.totalIncomeTxt='总人数';
				}
				//微官网分析
				if(d===10){
					let radio=this.reportData.radio;
					if(radio=='一年'||radio=='自定义')
					{
						radio='今日';
					}
					this.reportData.radio=radio;
					this.workTableChangeTime(radio);
					return;
				}

				this.updateMyReportDataByTimeAndType('','',d,true);
			},

			//查看我的任务-线索详情模块
			closeEdit(d){
				this.taskActivitiesUpdateByTime();
			},
			openRelease(clue){
				this.$refs.clueRelease.init([clue]);
			},
			openEdit(clue){
				this.$refs.clueEdit.init(clue);
			},
			openVisitAdd(clue){
				this.$refs.visitAdd.init(clue);
			},
			closeRelease(d){
				this.taskActivitiesUpdateByTime();
			},
			closeVisitAdd(d){
				this.taskActivitiesUpdateByTime();
			}

		},
		mounted(){
			this.signin_mode=tool.getDictNameByValue(-100,'signin_mode');//获取课程状态数据字典列表
			for(let i=0;i<this.signin_mode.length;i++){
				if(this.signin_mode[i].value==0){
					this.signin_mode.splice(i,1);
					break;
				}
			}
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss">
	.moreBox{
		width: 100%;
		// margin-left: 10%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.el-button{
			margin-left: 0 !important;
			width: 80%;
		}
	}
	// 修改tooltip的最小宽度值
	.el-popover{
		min-width: 0.80rem !important;
	}
	.workPlatformPageContainer{
		.content{
			display: flex;
			flex-wrap: wrap;
			min-width: 15.9609rem;
			width: 15.9609rem;
			margin: 0 auto;
			.timeselect{
				position: absolute;
				right: 0.26rem;
				top: -0.05rem;
				.el-radio-button__orig-radio:checked + .el-radio-button__inner{
						color: #3885f8;
						font-weight: bold;
						background: #FFFFFF;
						border: 0.01rem solid #DCDFE6;
						-webkit-box-shadow: 0.00rem 0 0 0 #FFFFFF;
						box-shadow: 0.00rem 0 0 0 #FFFFFF;
				}
			}
			.tabs_task_grade{
				// margin-left: 0.58rem;
				margin-top: 0.2rem;
				width: 5.96rem;
				height: 4rem;
				background: #fff;
				border: 0.01rem solid #ededed;
				border-radius: 0.10rem;
				box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
				.el-tabs__header{
					background-color: #f5f7fa;
					padding: 0.04rem 0.32rem 0.04rem 0.32rem;
					border-radius: 0.1rem 0.1rem 0 0;
					
					#tab-task,#tab-grade{
						font-size: 0.2rem;
					}
					.el-tabs__nav-wrap::after{
						background: rgba(0,0,0,0);
					}
				}
				.el-tabs__content{
					overflow: visible;
					
				}
				.task{
					.el-button{
						line-height: 0;
						margin-right: 0.1rem;
						font-size: 0.14rem;
					}
					.el-timeline-item{
						padding-bottom: 0.1rem;
					}
					.el-timeline-item__content{
						display: flex;
						justify-content: space-between;
						align-content: center;
						padding: 0 0.15rem 0 0;
						font-size: 0.16rem;
						color:#333333;
						// overflow: auto;
						// .el-tab-pane{
						// 	overflow: auto;
						// }
						
					}
					.el-timeline-item__timestamp{
						margin-top: 0;
						font-size: 0.14rem;
						color:#666666;
					}
					.title{
						line-height: 1.2;
						margin-left: 0.26rem;
						font-size: 0.16rem;
					}
					.taskActivities{
						height: 50%;
						.content{
							min-width: 0.1rem;
						}
						.time{
							font-size: 0.1rem;
							margin-left: -0.5rem;
						}
						.btn{

						}
					}
					.taskRemind{

					}
					.box{
						height: 1.4rem;
						overflow-y: auto;
						margin-top: 0.1rem;
					}
					.taskRemindBack{
						position: fixed;
						left: 2.1rem;
						top: 0.8rem;
						width: 100%;
						height: 100%;
						opacity: 0.02;
						background: #000;
						z-index: 2002;
						display: none;
					}
				}
				.nodataLable{
					margin-top: 0.4rem;
					width: 100%;
					display: block;
					color: #666666;
					font-size: 0.16rem;
					text-align: center;
				}
			}
			// 课程表
			.classTableBox{
				// margin-left: 0.58rem;
				margin-top: 0.14rem;
				width: 15.8609rem;
				height: auto;
				background: #fff;
				border: 0.01rem solid #ededed;
				border-radius: 0.10rem;
				box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
				
			}
			// 我的报表
			.myWorkTable{
				margin-left: 0.14rem;
				margin-top: 0.2rem;
				width: 9.775rem;
				height: 4rem;
				background: #fff;
				border: 0.01rem solid #ededed;
				border-radius: 0.1rem;
				box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
				overflow: hidden;
				.el-date-editor{
					position: absolute;
					right: 0.2rem;
					top: 0.05rem;
					width: 0.69rem;
					height: 0.27rem;
					opacity: 0;
					pointer-events: none;
				}
				.box-title{
					background-color: #f5f7fa;
					padding: 0 0.32rem 0 0.32rem;
					border-radius: 0.1rem 0.1rem 0 0;
					line-height: 0.45rem;
					font-size: 0.14rem;
				}
				
				.box-worktableMain{
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					margin-top: 0.02rem;
					height: 3rem;
					.box-radioBtn{
						position: relative;
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						height: 0.65rem;
						font-size: 0.18rem;
						color: #333333;
						padding: 0 0.2rem;
						.radioItem{
							display: flex;
							justify-content: center;
							align-items: center;
							white-space: nowrap;
							width: 1.55rem;
							height: 0.3rem;
							border-radius: 0;
							border-right: 0.01rem solid #DCDFE6;
						}
						.radioItem:hover{
							cursor: pointer;
							color: #3885f8;
						}
						.radioItem.first{

						}
						.radioItem.last{
							border-right: 0;
						}
						.radioItem.row2{
							margin-top: 0.05rem;
						}
						.radioItem[select='true']{
							color: #FFFFFF;
							background-color: #3885f8;
							border-color: #3885f8;
							border-radius: 0.04rem;
							// -webkit-box-shadow: -0.01rem 0 0 0 #3885f8;
							// box-shadow: -0.01rem 0 0 0 #3885f8;
						}
					}
					.box-chartWTB{
						width: 100%;
						height: 2.8rem;
						padding: 0 0.2rem;
						display: flex;
						.left{
							width:25%;
							height: 100%;
							.leftbox1{
								width: 100%;
								height: 50%;
								.txt1{
									margin-top: 0.15rem;
   	 								padding-left: 0.1rem;
									font-size: 0.18rem;
									color: #3885f8;
									font-weight: 600;
								}
								.txt2{
									margin-top: 0.2rem;
									text-align:left;
									color: #3885f8;
									padding-left: 0.2rem;
									white-space: nowrap;
									.num{
										font-size: 0.36rem;
									}
									.unit{
										font-size: 0.16rem;
									}
								}
								.txt3{
									margin-top: 0.05rem;
									font-size: 0.18rem;
									text-align:left;
									padding-left: 0.2rem;
								}
							}
							.splitline{
								width: 1.78rem;
								left: 0.2rem;
								height: 0.01rem;
								border: 0.01rem solid #ebebeb;
								position: relative;
								// top: -0.06rem;
							}
							.leftbox2{
								width: 100%;
								// margin-top: -0.150rem;
								.txt1{
									margin-top: 0.20rem;
									font-size: 0.36rem;
									text-align: left;
									color: #FF5252;
									padding-left: 0.2rem;
									white-space: nowrap;
									.unit{
										font-size: 0.2rem;
									}
									.arrow{
										font-size: 0.25rem;
									}
								}
								.txt2{
									font-size: 0.18rem;
									color:#333333;
									text-align: left;
									padding-left: 0.2rem;
									margin-top: 0.05rem;
								}
							}
						}
						.chartbox{
							width: 75%;
							height: 98%;
						}
						.chartboxNodataLable{
							width: 75%;
							height: 100%;
							font-size: 0.16rem;
							color: #666666;
							display: flex;
							justify-content: center;
							align-items: center;
							// margin-top: -0.2rem;
						}
						.box-fullChart{
							width: 100%;
							height: 98%;
							font-size: 0.16rem;
							color: #666666;
							.txt{
								padding-left: 0.4rem;
								margin-top: 0.16rem;
								color: #3885f8;
								font-weight: bold;
								display: block;
							}
							.chart_loudou,.chart_qudao,.chart_website,.chartNodata{
								width: 100%;
								height: 2.4rem;
								padding-top: 0.1rem;
							}
							.chart_loudou{
								width: 45%;
								margin: 0 auto;
							}
							.chartNodata{
								// display: none;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
					
				}
				
			}
			// 广告
			.carouselBox{
				margin-top: 0.14rem;
				width: 15.8609rem;
				height: auto;
				background: #fff;
				border: 0.01rem solid #ededed;
				border-radius: 0.10rem;
				box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
				overflow: hidden;
			}
			.box-myclass{
				width:100%;
				padding:0 0.12rem;
				max-height: 3.2rem;
				overflow: hidden;
				overflow-y: auto;
				.el-collapse-item__arrow{
					display: none;
				}
				.signState{
					display: inline-block;
					width: 0.12rem;
					height: 0.12rem;
					background-color: #3a3a3a;
					border-radius: 0.06rem;
					margin: 0 0.05rem;
					user-select: none;
				}
				//签到
				.signState[signMode='1']{
					background-color: #72e65b;
				}
				//请假
				.signState[signMode='3']{
					background-color: #f3ca68;
				}
				//补课
				.signState[signMode='4']{
					background-color: #93d0fe;
				}
				//旷课
				.signState[signMode='5']{
					background-color: #d0d0d0;
				}
				.box-classHead{
					display: flex;
					justify-content: space-between;
					width: 100%;
					font-size: 0.16rem;
					height: 0.36rem;
					background-color: #e7f1ff;
					border-radius: 0.1rem 0.1rem 0 0.1rem;
					
					.classInfo{
						display: flex;
						width: 1.5rem;
						.clsname{
							display: inline-block;
							width: 0.9rem;
							text-align: center;
							height: 0.48rem;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.rect{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 1.3rem;
							background-color: #8bb5e1;
							color: #ffffff;
						}
						.triangle{
							width: 0; 
							height: 0;
							border-width: 0.18rem;
							border-style: solid;
							border-color: transparent #8bb5e1 transparent transparent;
							transform: rotate(180deg);
						}
						
					}
					.courseInfo{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 3.3rem;
					}
					.signInfo{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 0.8rem;
						.txt{
							margin-right: 0.05rem;
						}
					}
				}
				.box-students{
					// display: flex;
    				// flex-wrap: wrap;
					// justify-content: space-between;
					width: 100%;
					.box-studpopover{
						display: flex;
						justify-content: flex-end;
						width: 1.14rem;
						float: left;
						margin-bottom: 0.08rem;
						.studentItem{
							display: flex;
							align-items: center;
							cursor: pointer;
							user-select: none;
							font-size: 0.16rem;
							.studentName{
								display: inline-block;
								max-width: 0.8rem;
								height: 0.28rem;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
				.box-bottom{
					font-size: 0.16rem;
					display: flex;
    				justify-content: space-between;
					width: 100%;
					margin-top: 0.1rem;
					height: 0.32rem;
					background-color: #f6f8f7;
					border-top: 0.02rem solid #ececec;
					.box-signMode{
						display: flex;
						font-size: 0.14rem;
						margin-left: 0.1rem;
						align-items: center;
						.signItem{
							min-width: 0.6rem;
						}
					}
					.btn{
						margin-top: 0.02rem;
						margin-right: 0.1rem;
						width: 0.71rem;
						height: 0.26rem;
						background-color: #3885f8;
						box-shadow: 0 0.04rem 0.22rem 0  rgba(56, 133, 248, 0.22);
						border-radius: 0.1rem;
						border: solid 0.01rem #e8f1ff;
					}
				}
			}
		}
		display: flex;
    	flex-wrap: wrap;
		
		//鼠标悬浮
		.hoverpointer:hover{
			cursor: pointer;
		}
		// 滚动条
		.scrollbarstyle::-webkit-scrollbar {
			width: 0.05rem;
		}
		.scrollbarstyle::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.scrollbarstyle::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
	.workplatformTaskRemindPopper{
		z-index: 2003 !important;
		.workplatformTaskRemindTable{
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
	}
	
</style>